<template>
    <div class="app-container">
        <!--工具条-->
        <el-row style="padding-bottom: 0;">
            <el-col :span="50" class="toolbar">
                <el-form :inline="true" :model="filters" ref="filterForm">
                    <el-form-item label="状态" prop="delFlag">
                        <el-select v-model="filters.delFlag" placeholder="请选择状态" :clearable="true">
                            <el-option value="" label="全部"></el-option>
                            <el-option value="0" label="已生效"></el-option>
                            <el-option value="1" label="过期"></el-option>
                            <el-option value="2" label="未生效"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道" prop="channelId">
                        <template>
                            <channels v-model="filters.channelCode"></channels>
                        </template>
                    </el-form-item>
                    <el-form-item label="产品类型" prop="delFlag">
                        <el-select v-model="filters.productCode" placeholder="请选择" filterable  :clearable="true">
                            <el-option v-for="item in productCodes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" v-on:click="handleSearch('filterForm')">搜索</el-button><!-- <v-hasRole="'query'" -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="toolbar">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button  type="primary" size="small" @click="handleAdd">新增</el-button><!-- <v-hasRole="'add'" -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--工具条结束-->
        <!--列表开始-->
        <el-table :data="pagination.content" :height="heightNum" highlight-current-row v-loading="isLoading" border>
            <el-table-column prop="code" label="编码" ></el-table-column>
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column prop="productName" label="物流产品" ></el-table-column>
            <el-table-column prop="channelCode" label="渠道" ></el-table-column>
            <el-table-column prop="numberEnd" label="箱数限制" ></el-table-column>
            <el-table-column label="有效状态" width="100">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="(new Date() > new Date(scope.row.periodStart) && new Date() <= new Date(scope.row.periodEnd+' 23:59:59'))">生效</el-tag>
                    <el-tag type="primary" v-else-if="(new Date(scope.row.periodStart) > new Date())">未生效</el-tag>
                    <el-tag type="danger" v-else>失效</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="有效时间" width="200">
                <template slot-scope="scope">
                    {{scope.row.periodStart}}-{{scope.row.periodEnd}}
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="250" >
                <template slot-scope="scope">
                    <el-button v-hasRole="'edit'" @click="handleEdit(scope.$index, scope.row)" :disabled="new Date() > new Date(scope.row.periodEnd +' 23:59:59')" type="primary" size="small">编辑</el-button><!-- <v-hasRole="'edit'" -->
                </template>
            </el-table-column>
        </el-table>
        <!--列表结束-->
        <!--分页开始-->
        <div class="pagination" v-if='pagination.totalElements > 0'>
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           :current-page.sync="pagination.page"
                           @current-change="handleCurrentChange"
                           :page-size="size" :page-sizes="[10, 20, 50, 100]"
                           :total="pagination.totalElements" style="float:right;">
            </el-pagination>
        </div>

        <!--分页结束-->
        <!--新增/修改开始-->
        <section>
            <!--新增|编辑 界面-->
            <el-dialog :title="formObj.title" :visible.sync="formObj.formVisible" :close-on-click-modal="false">
                <el-form  :model="formObj.formModel" class="demo-form-inline" :rules="rules" :inline="true"
                         label-width="100px" label-position="right" ref="mailForm">
                    <table style="border-collapse:separate; border-spacing:0px 1px;">
                        <tr>
                            <td>
                                <el-form-item label="编码" prop="code">
                                    <el-input v-model="formObj.formModel.code" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="名称" prop="name">
                                    <el-input v-model="formObj.formModel.name" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="物流产品" prop="productCode">
                                    <el-select :disabled="formObj.title == '编辑'" v-model="formObj.formModel.productCode" placeholder="请选择" filterable @change="changeProduct"  :clearable="true">
                                        <el-option v-for="item in productCodes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-form-item label="渠道" prop="channelCode">
                                    <template>
                                        <el-input v-model="formObj.formModel.channelCode" placeholder="请输入内容" :disabled = true></el-input>
                                    </template>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="箱数区间" prop="numberStart">
                                    <el-input class="short_input80" v-model="formObj.formModel.numberStart" placeholder=""></el-input>
                                </el-form-item>
                                <el-form-item>-</el-form-item>
                                <el-form-item prop="numberEnd">
                                    <el-input class="short_input80" v-model="formObj.formModel.numberEnd" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="体积系数" prop="volumeFactor">
                                    <template>
                                        <el-input v-model="formObj.formModel.volumeFactor" placeholder="请输入内容" ></el-input>
                                    </template>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-form-item label="箱数长" prop="length">
                                    <el-input v-model="formObj.formModel.length" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="箱数宽" prop="width">
                                    <el-input v-model="formObj.formModel.width" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="箱数高" prop="heigh">
                                    <el-input v-model="formObj.formModel.heigh" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <el-form-item label="生失效时间" prop="periods">
                                    <el-date-picker v-model="formObj.formModel.periods" format="yyyy-MM-dd" type="daterange" placeholder="选择时间范围" :disabled="formObj.title === '查看'" ></el-date-picker>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </el-form>
                <div v-if="formObj.title !== '查看'" slot="footer" class="dialog-footer">
                    <el-button @click.native="handleClose('mailForm')">取消</el-button>
                    <el-button type="primary" @click.native="handleSubmit('mailForm')"
                               :loading="isLoading">提交
                    </el-button>
                </div>
            </el-dialog>
        </section>
        <!--新增/修改结束-->
    </div>
</template>

<script>
    import moment from "moment";
    import http from '../../../axios/http';
    import {isNotEmpty,isEmpty} from "../../../filter";

    export default {
        name: 'floorInfo',
        data() {
            return {
                filters:{
                    delFlag:'0',
                    productCode:null,
                    channelCode:null,
                },
                code:null,
                productCodes:[],
                pagination: {
                    totalElements: 0,
                    page: 1,
                    content: []
                },
                heightNum:'',
                size: 20,
                isLoading: false,
                selecteds: [],//列表选中列
                formObj: {
                    title: null,
                    formModel: {
                        code:null,
                        name:null,
                        productCode:null,
                        channelCode:null,
                        period: [],
                        numberStart:null,
                        numberEnd:null,
                        length:null,
                        width:null,
                        heigh:null,
                    },
                    formVisible: false//编辑界面是否显示
                },
                rules: {
                    code: [
                        {required: true, message: '请输入编码', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    productCode: [
                        {required: true, message: '请选择物流产品', trigger: 'change'}
                    ],
                    numberStart: [
                        {required: true, message: '请输入箱数', trigger: 'blur'},
                        { pattern: /^([1-9]\d*|[0]{1,1})$/, message: "请输入正数", trigger: 'blur'},
                    ],
                    numberEnd: [
                        {required: true, message: '请输入箱数', trigger: 'blur'},
                        { pattern: /^([1-9]\d*|[0]{1,1})$/, message: "请输入正数", trigger: 'blur'},
                    ],
                    length: [
                        {required: true, message: '请输入长', trigger: 'blur'},
                        { pattern: /^[0-9]+([.]{1}[0-9]{1,2})?$/, message: "请输入正数，最多2位小数", trigger: 'blur'},
                    ],
                    width: [
                        {required: true, message: '请输入宽', trigger: 'blur'},
                        { pattern: /^[0-9]+([.]{1}[0-9]{1,2})?$/, message: "请输入正数，最多2位小数", trigger: 'blur'},
                    ],
                    heigh: [
                        {required: true, message: '请输入箱数', trigger: 'blur'},
                        { pattern: /^[0-9]+([.]{1}[0-9]{1,2})?$/, message: "请输入正数，最多2位小数", trigger: 'blur'},
                    ],
                    volumeFactor:[
                        {required: true, message: '请输入体积系数', trigger: 'blur'},
                        { pattern: /^[0-9]+([.]{1}[0-9]{1,2})?$/, message: "请输入正数，最多2位小数", trigger: 'blur'},
                    ],
                    periods: [
                        {type: "array",required: true, message: '请选择生失效时间', trigger: 'change'}
                    ],
                },
            }
        },
        methods: {
            loadPagination() {
                const self = this;
                window.console.log("this.pagination.page:" + self.pagination.page);
                let params = {
                    page: this.pagination.page === 0 ? 1 : this.pagination.page,
                    size: this.size === 0 ? 20 : this.size
                };
                if (this.sort) {
                    params.sort = this.sort;
                }
                if (isNotEmpty(this.filters.delFlag)) {//状态
                    params['search_delFlag'] = this.filters.delFlag;
                }
                if (isNotEmpty(this.filters.productCode)) {//产品类型
                    params['search_eq_productCode'] = this.filters.productCode;
                }
                if (isNotEmpty(this.filters.channelCode)) {//渠道
                    params['search_eq_channelCode'] = this.filters.channelCode;
                }
                self.isLoading = true;
                http.get("api/oneMultiPackage", {params: params}).then(response => {
                    this.isLoading = false;
                    let page = this.pagination.page;
                    this.pagination = response;
                    this.pagination.page = page;
                });
            },
            handleSearch(ref) {
                this.$refs[ref].validate((valid) => {
                    if (valid) {
                        this.handleCurrentChange(1);
                    }
                });
            },
            handleAdd() {//打开新增界面
                this.isLoading = false;
                this.code = null;
                this.formObj = {
                    title: '新增',
                    formVisible: true,
                    formModel: {
                        code:null,
                        name:null,
                        productCode:null,
                        channelCode:null,
                        period: [],
                        numberStart:null,
                        numberEnd:null,
                        length:null,
                        width:null,
                        heigh:null,
                    }
                };
            },
            changeProduct(){
                if(this.formObj.formModel.productCode == '' || this.formObj.formModel.productCode == undefined){
                    this.formObj.formModel.channelCode = "";
                    return;
                }
                http.get("api/oneMultiPackage/findChannelCode/"+this.formObj.formModel.productCode).then(response =>{
                        this.formObj.formModel.channelCode = response;
                })
            },
            handleEdit(index, row) {//打开编辑界面
                this.isLoading = false;
                this.code = row.code;
                this.formObj = {
                    title: '编辑',
                    action: 'update',
                    formVisible: true,
                    formModel: Object.assign({}, row)
                };
                this.formObj.formModel.numberStart = row.numberStart+"";
                this.formObj.formModel.numberEnd = row.numberEnd+"";
                this.formObj.formModel.length = row.length+"";
                this.formObj.formModel.width = row.width+"";
                this.formObj.formModel.heigh = row.heigh+"";
                this.formObj.formModel.volumeFactor = row.volumeFactor+"";
                let time = [];
                time[0] = row.periodStart;
                time[1] = row.periodEnd;
                this.formObj.formModel.periods = time
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size = val;
                this.loadPagination();
            },
            handleCurrentChange(val) {
                window.console.log('this.pagination.page:' + val);
                this.pagination.page = val;
                window.console.log('排序动作:' + this.sort);
                this.loadPagination();
            },
            handleSubmit(ref) {//提交表单
                console.log("提交表单");
                this.$refs[ref].validate((valid) => {
                    console.log("valid : " + valid);
                    let url = "api/oneMultiPackage";
                    let method = "post";
                    if (this.formObj.formModel.id) {
                        method = "put";
                    }
                    if (valid) {
                        this.isLoading = true;
                        console.log(JSON.stringify(this.formObj.formModel))
                        http.postOrPut(url, method, this.formObj.formModel).then(response => {
                            this.isLoading = false;
                            if(response.msg != null){
                                this.$message.warning(response.msg)
                                return
                            }
                            this.formObj.formVisible = false;
                            this.$refs[ref].resetFields();
                            this.loadPagination();
                        }).catch(function (error) {
                            this.isLoading = true;
                            console.log(JSON.stringify(error));
                            this.$message.error(error['data']);
                        });
                    } else {
                        this.isLoading = false;
                    }
                });
            },
            handleClose(ref) {//关闭表单
                this.formObj.formVisible = false;
                this.$refs[ref].resetFields();
                //this.handleReset(ref);
            },
            initData() {
                // 计算表格高度
                let self = this;
                self.heightNum = self.utils.calcTableHeight();
                // 响应窗口大小改变
                window.onresize = function () {
                    self.heightNum = self.utils.calcTableHeight();
                };
            },
        },
        mounted() {
            this.initData();
            this.loadPagination();
        },
    }
</script>

